<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 150%;text-align: center;">

  
    <div style="" class="box">
      
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">数据看板</div>
      </div> 

      <div style="width: 100%;height: 40vh;text-align: center;margin-top: 1vh;"> 
             
        <div style="width: 95%;margin-top: 2vh;">
          
          <div class="inputBox">
            <div style="padding-top: 1vh;;">周期内输送氢气总量</div>
            <div>{{form.totalAmountHydrogen}}kg</div> 
          </div>
                  
          <div class="inputBox">
            <div style="padding-top: 1vh;;">建设项目总投资</div>
            <div>{{priceFor(form.projectTotalInvestment)}}万元</div> 
          </div>
          
          <div class="inputBox">
            <div style="padding-top: 1vh;;">总成本费用</div>
            <div>{{priceFor(form.totalCost)}}万元</div> 
          </div>
                  
          <div class="inputBox">
            <div style="padding-top: 1vh;;">贷款总利息</div>
            <div>{{priceFor(form.totalLoanInterest)}}万元</div> 
          </div>
               
          <div class="inputBox">
            <div style="padding-top: 1vh;;">平准化输氢成本(LCOH)</div>
            <div>{{form.hydrogenTransportationCost}}￥/kg</div> 
          </div>
             
          <div class="inputBox">
            <div style="padding-top: 1vh;;">压缩环节平准化成本</div>
            <div>{{form.compressionCost}}￥/kg</div> 
          </div>
            
          <div class="inputBox">
            <div style="padding-top: 1vh;;">运输环节平准化成本</div>
            <div>{{form.transportationCost}}￥/kg</div> 
          </div>

        </div>
           
 
      </div>
       
    </div>
 
 
  
  <div class="box2">
    <div id="pieCharts1" style="width: 98%;height: 98%;margin: 0 auto;"></div>
  </div>
    
  <div class="box3">
    <div id="pieCharts2" style="width: 98%;height: 98%;margin: 0 auto;"></div>
  </div>
 
    
  <div class="box4">
    <div id="pieCharts3" style="width: 98%;height: 98%;margin: 0 auto;"></div>
  </div>
 
    
  <div class="box5">
    <div id="pieCharts4" style="width: 98%;height: 98%;margin: 0 auto;"></div>
  </div>
 
      
  <div class="box6">
    <div id="lineCharts1" style="width: 98%;height: 98%;margin: 0 auto;"></div>
  </div>
 
      
  <div class="box7">
    <div id="lineCharts2" style="width: 98%;height: 98%;margin: 0 auto;"></div>
  </div>
 
 
</div>
  
</template>

<script>
  
  // 引入基本模板,按需加载
  let echarts = require('echarts/lib/echarts');

  import priceUtil from '../../assets/js/priceUtil.js'

  export default {
    name: 'costBreakdownPht',
    data() {
      return {
        form: {
          id:"",
          projectId : "",
          totalAmountHydrogen: '-',
          projectTotalInvestment: '-',
          totalCost: '-',
          totalLoanInterest: '-',
          hydrogenTransportationCost: '-',
          compressionCost: '-',
          transportationCost: '-', 
        },
        projectId : "",
       
      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.queryPageData();



    },
    methods: {
            
      priceFor : function(price){
        var value = window.priceFor(price);
        return value;
      },
      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryCostBreakdownPht?projectId='+this.projectId+"&type=pht"+"&tableName=pht_cost_breakdown").then((res) => {
          var result = res.data;
          if(result){
            
            vm.form = result.formData;

            var htsccChartData = result.htsccChartData;
            var cpccChartData = result.cpccChartData;
            var tpccChartData = result.tpccChartData;
            var pcidChartData = result.pcidChartData;

            var actpChartData = result.actpChartData;
            var rpipChartData = result.rpipChartData;

            let pieCharts1 = this.$echarts.init(document.getElementById('pieCharts1'))
            let pieCharts2 = this.$echarts.init(document.getElementById('pieCharts2'))
            let pieCharts3 = this.$echarts.init(document.getElementById('pieCharts3'))
            let pieCharts4 = this.$echarts.init(document.getElementById('pieCharts4'))

            let lineCharts1 = this.$echarts.init(document.getElementById('lineCharts1'))
            let lineCharts2 = this.$echarts.init(document.getElementById('lineCharts2'))

            var data1 = [
              { value: 0, name: "压缩环节" },
              { value: 0, name: "管道运输环节" }, 
            ];

            var data2 = [
              { value: 0, name: "资本成本" },
              { value: 0, name: "能源运维成本" }, 
              { value: 0, name: "非能源运维成本" } 
            ];

            var data3 = [
              { value: 0, name: "资本成本" }, 
              { value: 0, name: "非能源运维成本" } 
            ];

            var data4 = [
              { value: 0, name: "管道材料成本" },
              { value: 0, name: "管道安装人工成本" }, 
              { value: 0, name: "杂项成本" }, 
              { value: 0, name: "路权成本" }
            ];

            var pieOption1 = this.getPieOption();
            var pieOption2 = this.getPieOption();
            var pieOption3 = this.getPieOption();
            var pieOption4 = this.getPieOption();

            var lineOption1 = this.getLineOption();
            var lineOption2 = this.getLineOption();

            if(htsccChartData.seriesData){
              pieOption1.series[0].data = htsccChartData.seriesData;
            }else{
              pieOption1.series[0].data = data1;
            }
            pieOption1.title.text = "输氢系统成本构成";

            if(cpccChartData.seriesData){
              pieOption2.series[0].data = cpccChartData.seriesData;
            }else{
              pieOption2.series[0].data = data2;
            }
            pieOption2.title.text = "压缩环节成本构成";

            if(tpccChartData.seriesData){
              pieOption3.series[0].data = tpccChartData.seriesData;
            }else{
              pieOption3.series[0].data = data3;
            }
            pieOption3.title.text = "运输环节成本构成";

            if(pcidChartData.seriesData){
              pieOption4.series[0].data = pcidChartData.seriesData;
            }else{
              pieOption4.series[0].data = data4;
            }
            
            pieOption4.title.text = "管道资本投资明细";

            lineOption1.title.text = "项目逐年成本费用";
            lineOption2.title.text = "项目贷款还本付息";
            lineOption1.legend[0].data = ['总成本费用','经营成本','折旧费','流动资金成本','财务费用（利息）'];
            lineOption2.legend[0].data = ['还本付息','长期借款还本','长期借款还息','流动资金还本','流动资金还息'];

            if(actpChartData){
              lineOption1.xAxis.data = actpChartData.xAxisData;
              lineOption1.series[0].name = "总成本费用";
              lineOption1.series[0].data = actpChartData.seriesData[0];
              lineOption1.series[1].name = "经营成本";
              lineOption1.series[1].data = actpChartData.seriesData[1];
              lineOption1.series[2].name = "折旧费";
              lineOption1.series[2].data = actpChartData.seriesData[2];
              lineOption1.series[3].name = "流动资金成本";
              lineOption1.series[3].data = actpChartData.seriesData[3];
              lineOption1.series[4].name = "财务费用（利息）";
              lineOption1.series[4].data = actpChartData.seriesData[4];
            }

            if(rpipChartData){
              lineOption2.xAxis.data = rpipChartData.xAxisData;
              lineOption2.series[0].name = "还本付息";
              lineOption2.series[0].data = rpipChartData.seriesData[0];
              lineOption2.series[1].name = "长期借款还本";
              lineOption2.series[1].data = rpipChartData.seriesData[1];
              lineOption2.series[2].name = "长期借款还息";
              lineOption2.series[2].data = rpipChartData.seriesData[2];
              lineOption2.series[3].name = "流动资金还本";
              lineOption2.series[3].data = rpipChartData.seriesData[3];
              lineOption2.series[4].name = "流动资金还息";
              lineOption2.series[4].data = rpipChartData.seriesData[4];
            }

            pieCharts1.clear(); 
            pieCharts2.clear(); 
            pieCharts3.clear(); 
            pieCharts4.clear(); 

            lineCharts1.clear(); 
            lineCharts2.clear(); 

            pieCharts1.setOption(pieOption1); 
            pieCharts2.setOption(pieOption2); 
            pieCharts3.setOption(pieOption3); 
            pieCharts4.setOption(pieOption4); 


            lineCharts1.setOption(lineOption1);
            lineCharts2.setOption(lineOption2);

            window.onresize = function(){
              pieCharts1.resize(); 
              pieCharts2.resize(); 
              pieCharts3.resize(); 
              pieCharts4.resize(); 
              lineCharts1.resize(); 
              lineCharts2.resize(); 

            }


          }
        }).catch((error) => {
          console.log(error);
        });


      },


      getPieOption:function(){
          
        const color = ["#3254DD", "#EF7BE3", "#22E59C", "#F9925A", "#22E5E5"]

        var pieOption = {
          color,
          title: { x: "center",
            text: '各成本项占LOCH的比例',
            top:"6%",
            textStyle: {
              color: '#f2f2f2', // 标题字体颜色为黑色
              fontSize: 16, // 标题字体大小为24px
              fontWeight: 'bold', // 标题字体加粗
            },
          },
          
          legend: {
            show: true,
            x: "center", //可设置图例位置
            y: "bottom", 
            icon: "rect",
            itemWidth: 16,
            itemHeight: 16,
            width: "500",
            textStyle: {
              //图例文字的样式
              color: "#b4e4ff",
              fontSize: 16,
              // 给出高度和rich对象，实现图标与文字居中对齐
              height: 12,
              rich: {
                  a: {
                    verticalAlign: "middle",
                  },
              },
            },
        },
          tooltip: {
            trigger: "item",
            extraCssText: "width: 128px;  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);",
            formatter: function (params) {
              let str =
                (params.data &&
                  `<div style="font-weight: bold;">${params.name}</div>
                  <div style="display:flex; justify-content: space-between; align-items: center;">
                      <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${color[params.dataIndex]}; margin-right: 4px;"></span>占比</span>
                      <span>${params.percent}%</span>
                  </div>`) ||
                "";
              return str;
            }
          },
          series: [
            {
              type: "pie",
              radius: "60%",
              center: ["50%", "50%"],
              label: {
                normal: {
                  formatter: "{xx|{b}}\n{c} 万元",
                  rich: {
                    xx: {
                      fontSize: 14,
                      lineHeight: 32
                    }
                  }
                }
              },
              data: [],
              itemStyle: {
                emphasis: { // 鼠标经过扇形区域时的阴影效果
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              },
              labelLine: {
                normal: {
                  length: 5,
                  length2: 20,
                  smooth: true
                }
              }
            }
          ]
        };

        return pieOption;
      },
      
      getLineOption(){

          var option = {
            title: { x: "center",
              text: '',
              top:"6%",
              textStyle: {
                color: '#f2f2f2', // 标题字体颜色为黑色
                fontSize: 16, // 标题字体大小为24px
                fontWeight: 'bold', // 标题字体加粗
              },
            },
            grid: {
              top: '20%',
              left: '5%',
              right: '15%',
              bottom: '8%',
              containLabel: true,
            },
            tooltip: {
              trigger: 'axis',
              backgroundColor: "rgba(1, 13, 19, 0.5)",
              borderWidth: 1,
              axisPointer: {
                type: 'shadow',
                // label: {
                //   show: true,
                // },
              },
              formatter: function (params) {
                var str = "";
                if (params.length > 0) {
                  str = params[0].name + "<br/>"
                }
                for (var i = 0; i < params.length; i++) {
                  if (params[i].seriesName !== "") {
                    str +=
                      params[i].seriesName +
                      ':' +
                      params[i].value +
                      "元<br/>";
                  }
                }
                return str;
              },
              textStyle: {
                color: "rgba(212, 232, 254, 1)",
                // fontSize: fontChart(0.24),
              },
              extraCssText: "z-index:2"
            },
            legend: [{
              x: "10%",
              y: 'bottom', 
              data:[],
              itemWidth: 15,
              itemHeight: 10,
              itemGap: 15,
              borderRadius: 4,
              textStyle: {
                color: "#f2f2f2",
                fontFamily: "Alibaba PuHuiTi",
                fontSize: 14,
                fontWeight: 400,
              },
            }],
            xAxis: {
              type: 'category',
              data: ['2018', '2019', '2020', '2021', '2022'],
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#f2f2f2 ', //X轴文字颜色
                },
              },
            },
            yAxis: [

              {
                type: 'value',
                name: '元',
                nameTextStyle: {
                  color: "#f2f2f2", 
                },
                
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#f2f2f2',
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  color: '#cccccc',
                  fontSize: 14
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#cccccc',
                  }
                },

              },

            ],
            series: [
              {
                name: '',
                type: 'line',
                symbol: "none",
                lineStyle: {
                  color: '#5470c6',
                },
                data: [],
              },
              {
                name: '',
                type: 'line',
                symbol: "none",
                lineStyle: {
                  color: '#91cc75',
                },
                data: [],
              },
              {
                name: '',
                type: 'line',
                symbol: "none",
                lineStyle: {
                  color: '#f3454b',
                },
                data: [],
              },
              {
                name: '',
                type: 'line',
                symbol: "none",
                lineStyle: {
                  color: '#fac858',
                },
                data: [],
              },
              {
                name: '',
                type: 'line',
                symbol: "none",
                lineStyle: {
                  color: '#fac858',
                },
                data: [],
              }, 
            ],
          };

          return option;
      }

    }
  }
</script>



<style>

.el-table{
  background-color: rgb(20 34 78);
  color: #FFFFFF;
  border-color: rgb(24 63 124 / 51%);
  *{
    border-color: rgb(24 63 124 / 51%) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgb(10 24 90 / 81%);
      th{
        color: #ffffff;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgb(8 26 80 / 88%);
      &:hover>td{      
        background-color: rgb(13 30 80);
      }
    }
  }
}
  .el-form--inline .el-form-item__content {
      display: inline-block;
      vertical-align: middle;
      margin-left: 1vh;
  }

  .el-radio {
      color: #eff4ff;
      cursor: pointer;
      margin-right: 30px;
  }

  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 


  
.titleDiv {
   width: 100%;
   margin: 0.5vh;
   height: 2.5vh; 
   font-weight: bold; 
   -webkit-box-shadow: none;
   box-shadow: none;
   font-weight: 700;
   font-style: normal;
   font-size: 2vh;
   color: #f2f2f2;
   text-align: left;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   position: relative;
 }
 .barColorBox {
   height: 2.5vh;
   width: 0.7vh;
   border-radius: 1px;
   display: inline-block;
   vertical-align: text-bottom;
   border: none;
   box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
   background-color: #FAFAFA;
   background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
   background-image: -o-linear-gradient(top,#17b4db,#07c968);
   background-image: -ms-linear-gradient(top,#17b4db,#07c968);
   background-image: linear-gradient(top,#17b4db,#07c968);
   background-repeat: repeat-x;
 }

 .titlefont {
   flex: 1;
   height: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   font-size: 1.8vh;
    padding-left: 5px;
    margin-top: 0vh;
 }

.inputBox{
    background-image: url(../../assets/images/infoBackground3.png);
    margin: 1vh auto;
    margin-left: 7vh;
    width: 75%;
    height: 8vh;
    background-repeat: round;
    opacity: 0.8;
    border-radius: 6px;
    font-size: 1vw;
    color: #ffffff;
  }

  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #161E43;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .box{ 
    width: 30%;
    height: 98%;
    position: absolute;
    left: 1.5vh;
    top: 1.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box2{ 
    width: 34%;
    height: 49%;
    position: absolute;
    left: 53vh;
    top: 1.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  

  .box3{ 
    width: 33%;
    height: 49%;
    position: absolute;
    left: 111.2vh;
    top: 1.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box4{ 
    width: 34%;
    height: 47%;
    position: absolute;
    left: 53vh;
    top: 37.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box5{ 
    width: 33%;
    height: 47%;
    position: absolute;
    left: 111.2vh;
    top: 37.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  
  .box6{ 
    width: 48.5%;
    height: 45%;
    position: absolute;
    left: 1.5vh;
    top: 72vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  
  .box7{ 
    width: 48.9%;
    height: 45%;
    position: absolute;
    left: 84.5vh;
    top: 72vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }


  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
